import React, { useEffect, useState } from 'react';
import { Descriptions, Table, Modal, Divider, Button } from 'antd'
import { getOffHospitalDetail } from '@/services/order/api';
import { showMsg } from '@/utils/utils';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
// @ts-ignore
import QRCode from 'qrcode.react';
import { print } from '@/utils/utils'; 

const BillDetail: React.FC<any> = (props) => {
  const { 
    record = {}, 
    patientInfo = {}, 
    handleModalVisible
  } = props;

  const columns: ProColumns<any>[] = [
    {
      title: '账单类型',
      dataIndex: 'order_type',
      valueType: 'select',
      valueEnum: {
        P: '计划订单',
        O: '一次性订单',
        R: '租赁订单' 
      }
    },
    {
      title: '账单日期',
      dataIndex: 'bill_date'
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name'
    },
   
    {
      title: '规格（单位）',
      dataIndex: 'specs_name1',
      render: (val, record) => record.order_type === 'R' ? '-' : val
    },
    {
      title: '单价',
      dataIndex: 'goods_price',
      valueType: 'money',
      align: 'right'
    },
    {
      title: '用量',
      dataIndex: 'goods_num'
    },
   
    {
      title: '折扣',
      dataIndex: 'discount'
    },
    {
      title: '账单费用',
      dataIndex: 'bill_price',
      valueType: 'money',
      align: 'right'
    }
  ]
  // 详情
  const [detail, setDetail] = useState<any>({});

  // 打印结算单
  const printSettle = () => {
    print(document.querySelector('.bill-modal .ant-modal-body'), {
      size: 'portrait'
    });
  }

  const getDetail = () => {
    console.log('record', record)
    let params = {
      patient_id: patientInfo.patient_id,
      admission_num: patientInfo.visit_no,
      current: 1,
      pageSize: 10000,
      order_id: record.order_id,
      manager_order_id: record.manager_order_id,
    }
    if (record.order_id) {
     delete params.manager_order_id
    } else {
     delete params.order_id
    }
    getOffHospitalDetail({
      ...params
    }).then((data) => {
      setDetail(data);
    }).catch(error => {
      showMsg(error?.data?.errmsg);
    });
  }

  useEffect(() => {
    if (patientInfo.patient_id) {
      getDetail();
    }
  }, [patientInfo, record]);

  useEffect(() => {
    if (detail.settle_no) {
      printSettle()
    }
  }, [detail]);

  return <Modal
      title=""
      wrapClassName="bill-modal"
      width="90%"
      bodyStyle={{ height: window.innerHeight-185, overflow: 'scroll' }}
      maskClosable={false}
      onCancel={() => handleModalVisible(false)}
      footer={null}
      visible>
      <div className="order-modal-content">
        <h2 className="tc">缴费单</h2>
        <Divider />
        <div>1.患者信息</div>
        <Divider style={{margin: '10px 0'}} />
        <Descriptions>
          <Descriptions.Item label="身份证/住院号">{patientInfo.identity_no} / {patientInfo.admission_num}</Descriptions.Item>
          <Descriptions.Item label="患者姓名">{patientInfo.patient_name}</Descriptions.Item>
          <Descriptions.Item label="归属科室">{patientInfo.admission_dept_name || patientInfo.admission_dept_code}</Descriptions.Item>
        </Descriptions>
       
        <div style={{marginTop: 10}}>2.商品信息</div>
        <Divider style={{margin: '10px 0 0'}} />
        <ProTable<any> 
          rowKey={() => {
            return Number(Math.random() * 10000).toFixed(0)
          }}
          columns={columns}
          pagination={false}
          options={false}
          scroll={{ x: 1000 }}
          search={false}
          dataSource={detail.record_list}
          bordered />

        <div style={{marginBottom: 10}}>3.汇总信息</div>
        <Divider style={{margin: '10px 0'}} />
        <Descriptions>
          {
            detail.settle_no && <Descriptions.Item label="结算单号">{detail.settle_no}</Descriptions.Item>
          }
          
          <Descriptions.Item label="创建时间">{detail.create_date + ' ' + detail.create_time}</Descriptions.Item>
          
          {
            detail.pay_qr_code_url && <Descriptions.Item  label="微信/支付宝扫码支付">
              <QRCode
                // value参数为生成二维码的链接
                value={detail.pay_qr_code_url}  
                // 二维码的宽高尺寸
                size={80} 
                // 二维码的颜色
                fgColor="#000"  
                renderAs="svg"
              />
            </Descriptions.Item>
          }
          
          {
            detail.pay_time && <Descriptions.Item label="支付时间">{detail.pay_time}</Descriptions.Item>
          }
          
          <Descriptions.Item label="商品数量">
            <span style={{color: '#F5232D', fontWeight: 'bold'}}>{detail.total_goods_num}（件）</span>
          </Descriptions.Item>
          <Descriptions.Item label="总价">{detail.total_price}</Descriptions.Item>
         
          <Descriptions.Item label="结算价">
            <span style={{color: '#F5232D', fontWeight: 'bold'}}>{detail.total_sett_price}</span>（元）
          </Descriptions.Item>
        </Descriptions>
      </div>
    </Modal>
}
export default BillDetail;
